<template>
  <div class="params">
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类参数</el-breadcrumb-item>
      </el-breadcrumb>
      <el-tag type="warning">
        <i class="el-icon-warning"></i>

        注意:必须选择最后一级分类</el-tag
      >
      <div class="block">
        <span class="demonstration">请选择分类</span>
        <el-cascader
          v-model="value"
          :options="options"
          :props="props"
          @change="handleChange"
        ></el-cascader>
      </div>
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="many">
            <el-table
              :data="manyData"
              border
              class="tabletop"
              style="width: 100%"
            >
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="参数名称"
                prop="attr_name"
              ></el-table-column>
              <el-table-column label="参数id" prop="attr_id"></el-table-column>
              <el-table-column label="操作">
                <template slot="header">
                  <el-button type="primary" size="mini" @click="addShow = true"
                    >添加</el-button
                  >
                </template>
                <el-table-column fixed="right" label="操作" width="320">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-edit"
                      @click="goEdit(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="delCatAttr(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态属性" name="only">
            <el-table :data="onlyData" border style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="参数名称"
                prop="attr_name"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot="header">
                  <el-button type="primary" size="mini" @click="addShow = true"
                    >添加</el-button
                  >
                </template>
                <el-table-column fixed="right" label="操作" width="320">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-edit"
                      @click="goEdit(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="delCatAttr(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <!-- 添加分类参数弹框 -->
      <el-dialog title="添加分类参数" :visible.sync="addShow">
        <el-form :model="addForm" :rules="rules">
          <el-form-item label="参数">
            <el-input v-model="addForm.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="addCatAttr">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑分类参数弹框 -->
      <el-dialog title="编辑分类参数" :visible.sync="editShow">
        <el-form
          :model="editForm"
          label-width="80px"
          ref="editForm"
          :rules="rules"
        >
          <el-form-item label="参数名称" prop="attr_name">
            <el-input
              v-model="editForm.attr_name"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button
            type="primary"
            native-type="submit"
            @click="editCatAttr('editForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getCategoriesList,
  getCatAttr,
  addCatAttr,
  delCatAttr,
  editCatAttr
} from "@/api/index";
export default {
  name: "",
  data() {
    return {
      value: "",
      options: [],
      props: {
        value: "cat_id",
        label: "cat_name",
        expandTrigger: "hover"
      },
      isLoading: false,
      activeName: "many",
      manyData: [],
      onlyData: [],
      curId: 0,
      // 添加参数
      addShow: false,
      addForm: {
        attr_name: "",
        attr_sel: "",
        attr_vals: ""
      },
      rules: {
        attr_name: [
          { required: true, message: "请输入分类参数", trigger: "blur" }
        ]
      },
      // 编辑参数
      editShow: false,
      editForm: {
        attr_name: ""
      },
      attr_id: 0
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  mounted() {},
  methods: {
    //   获取所有商品分类
    async getCategoriesList() {
      await getCategoriesList({ type: "3" }).then(({ data, meta }) => {
        meta.status == 200
          ? (this.options = data)
          : this.$message.error(meta.msg);
      });
    },
    // 修改选择的商品分类
    handleChange() {
      this.value.length >= 3 ? this.getCatAttr() : "";
      if (this.value.length >= 3) {
        this.getCatAttr();
      }
    },
    // 参数与属性切换
    handleClick() {
      this.value.length < 3
        ? this.$message.error("请先选择分类")
        : this.getCatAttr();
    },
    // 获取分类参数
    async getCatAttr() {
      let sel = this.activeName;
      this.curId = this.value[this.value.length - 1];
      let id = this.curId;
      await getCatAttr({ id, sel }).then(({ data, meta }) => {
        if (meta.status == 200) {
          if (this.activeName == "many") {
            this.manyData = data;
          } else {
            this.onlyData = data;
          }
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
    // 添加分类参数
    async addCatAttr() {
      this.addForm.attr_sel = this.activeName;
      await addCatAttr(this.curId, this.addForm).then(({ meta }) => {
        if (meta.status == 201) {
          this.$message.success(meta.msg);
          this.addForm.attr_name = "";
          getCatAttr({ id: this.curId, sel: this.addForm.attr_sel }).then(
            ({ data }) => {
              if (this.activeName == "many") {
                this.manyData = data;
              } else {
                this.onlyData = data;
              }
            }
          );
          this.addShow = false;
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
    // 删除分类参数
    delCatAttr(row) {
      this.$confirm("真的要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let data = await delCatAttr(this.curId, row.attr_id);
          console.log(data);
          data.meta.status == 200
            ? this.$message.success(data.meta.msg)
            : this.$message.warning(data.meta.msg);
          getCatAttr({ id: this.curId, sel: this.activeName }).then(
            ({ data }) => {
              if (this.activeName == "many") {
                this.manyData = data;
              } else {
                this.onlyData = data;
              }
            }
          );
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 编辑分类参数
    goEdit(row) {
      this.editShow = true;
      this.attr_id = row.attr_id;
      this.editForm.attr_name = row.attr_name;
    },
    async editCatAttr() {
      await editCatAttr(this.curId, this.attr_id, {
        attr_name: this.editForm.attr_name,
        attr_sel: this.activeName
      }).then(({ meta }) => {
        if (meta.status == 200) {
          this.$message.success(meta.msg);
          this.editForm.attr_name = "";
          getCatAttr({ id: this.curId, sel: this.activeName }).then(
            ({ data }) => {
              if (this.activeName == "many") {
                this.manyData = data;
              } else {
                this.onlyData = data;
              }
            }
          );
          this.editShow = false;
        } else {
          this.$message.error(meta.msg);
        }
      });
    }
  },
  created() {
    this.getCategoriesList();
  },
  filters: {}
};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  text-align: left;
}
.el-tag {
  font-size: 16px;
  margin: 10px 0;
  line-height: 30px;
}
.block {
  line-height: 0;
  margin: 10px 0;
}
</style>
